<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="" />
        <link href="favicon.ico" rel="shortcut icon" />
        <title>Google Maps jQuery Plugin - Customization</title>
        <meta name="robots" content="index,follow">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <!-- The Needs -->
            
        <!-- ! The Plugin Stylesheet, needed -->
        <link rel="stylesheet" type="text/css" href="./css/jquery.googlemaps.customize.css" title="style" />
        
        <!-- ! Google Maps API v3, needed -->
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        
        <!-- ! Addition Infobox Script from Google, use THIS modificated Version, needed -->
        <script type="text/javascript" src="./js/infobox.js"></script>
        
        <!-- ! jQuery latest, here: 1.9.1., needed -->
        <script type="text/javascript" src="./js/jquery.min.js"></script>
        
        <!-- ! The Plugin Script Base, needed -->
        <script type="text/javascript" src="./js/jquery.googlemaps.js"></script>
        
        <!-- ! Example Map Data, replace it, but: needed anyway -->
        <script type="text/javascript" src="./mapdata-customize.js"></script>
        
        <!-- End Needs -->
        
        <!-- Example Page Java Script, not needed -->
        <script type="text/javascript" src="./js/assets/page.js"></script>
        
 
        <!-- Additional Stylesheets, not needed -->
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,300" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/bootstrap.min.css" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/font-awesome.min.css" title="style" />
        <!-- end Additional Stylesheets -->
        
        <!-- ! Example CSS Stuff, not needed -->
        <link rel="stylesheet" type="text/css" href="./css/assets/page.css" title="style" />
        
    </head>
    <body class="customize">
        <div class="page">
            <div class="left">
                <div class="heading">
                    <h1>Google Maps XHR mit unterschiedlichen Markern</h1>
                    <h2>jQuery Plugin</h2>
                </div>
                <div id="mapbox" class="mapbox">
                    
                </div>
            </div>
            <div class="right">
               <div class="heading">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-xs btn-disabled" disabled="disabled">Show Seed: </button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowOptions fat">Merged Options</button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowParams fat">Init Parameters</button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowDefaultOptions fat">Plugin Defaults</button>
                    </div>
                </div>
               <textarea class="" id="options" wrap="off">
                    
               </textarea>
               <div class="code-controls">
                   
                   <div class="btn-group fltr">
                       <button type="button" class="btn btn-default btn-xs btn-disabled" disabled="disabled">Actions: </button>
                       <button type="button" class="btn btn-primary btn-xs buttonInit">init()</button>
                       <button type="button" class="btn btn-primary btn-xs buttonShowAllInfoBoxes">showAllInfoBoxes()</button>
                       <button type="button" class="btn btn-primary btn-xs buttonHideAllInfoBoxes">hideAllInfoBoxes()</button>
                       <button type="button" class="btn btn-primary btn-xs buttonDestroy">destroy()</button>
                   </div>
                   <button type="button" class="btn btn-success btn buttonInit fat">Init with this options</button>
               </div>
            </div>
        </div>
    </body>

    <script>
        var mapbox;

        $(window).on('ready', function() {

            mapbox = $('#mapbox').googleMapsTools({
                data : map,
                mapStyles : [{
                    "featureType" : "transit.line",
                    "stylers" : [{
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "landscape.natural",
                    "stylers" : [{
                        "lightness" : -77
                    }, {
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "landscape.natural.landcover",
                    "stylers" : [{
                        "lightness" : -79
                    }, {
                        "visibility" : "on"
                    }]
                }, {
                    "featureType" : "landscape.man_made",
                    "stylers" : [{
                        "lightness" : -92
                    }]
                }, {
                    "featureType" : "water",
                    "stylers" : [{
                        "hue" : "#00ccff"
                    }, {
                        "saturation" : 100
                    }, {
                        "lightness" : -74
                    }]
                }, {
                    "featureType" : "road.local",
                    "stylers" : [{
                        "lightness" : -67
                    }]
                }, {
                    "featureType" : "road.arterial",
                    "stylers" : [{
                        "lightness" : -82
                    }, {
                        "hue" : "#00ff00"
                    }, {
                        "saturation" : 1
                    }, {
                        "weight" : 0.6
                    }]
                }, {
                    "featureType" : "poi",
                    "stylers" : [{
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "administrative",
                    "stylers" : [{
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "road.highway",
                    "stylers" : [{
                        "hue" : "#0091ff"
                    }, {
                        "saturation" : -64
                    }, {
                        "weight" : 0.6
                    }, {
                        "lightness" : -77
                    }]
                }, {
                    "featureType" : "transit",
                    "elementType" : "labels",
                    "stylers" : [{
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "road",
                    "elementType" : "labels",
                    "stylers" : [{
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "landscape",
                    "stylers" : [{
                        "hue" : "#ff3c00"
                    }, {
                        "saturation" : 100
                    }, {
                        "lightness" : 44
                    }]
                }],
                
                centerOpenInfoboxOnWindowResize : true,
                
                //markerIcon	: 'marker_customize.png',
                infoBox : {
                    openOn : 'hover',
                    closeOnClickOutside : true,
                    centerMapOnShow : true,
                }
            });
            
            $('.buttonShowOptions').on('click',function(){
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getOptions(),null,4)).html().replace(/\\"/gi,'"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });
            
            $('.buttonShowDefaultOptions').on('click',function(){
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getDefaults(),null,4)).html().replace(/\\"/gi,'"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });
            
            $('.buttonShowParams').on('click',function(){
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getParams(),null,4)).html().replace(/\\"/gi,'"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });
            
            $('.buttonShowOptions').trigger('click');

        });

    </script>
</html>